<template>
  <div id="TemplatePage">
    <div class="header-wrapper">
      <div class="title-wrapper">
        <span class="title">模板管理</span>
      </div>
    </div>

    <div class="content-wrapper">
      <div class="action-wrapper">
        <div class="action-btn" @click="addTemplateHandle">
          <el-icon class="btn-icon"><Plus /></el-icon>
          新建模板
        </div>
      </div>
      <div class="template-list">
        <div class="template-item" v-for="item in templateList" :key="item.id">
          <div class="template-info" @click="editTemplateHandle(item)">
            <div class="template-main">
              <div class="template-column template-name">
                <img class="icon" src="@/assets/images/icon.png" alt="" />
                <span class="value">{{ item.name }}</span>
              </div>
            </div>
            <div class="template-other">
              <div class="template-column template-time">
                <span class="label">创建时间：</span>
                <span class="value">{{
                  formatTime(item?.createTime || "--")
                }}</span>
              </div>
              <div class="template-column template-creator">
                <span class="label">创建人：</span>
                <span class="value">{{ item.createUserName || "--" }}</span>
              </div>
              <div class="template-column template-note">
                <span class="label">说明：</span>
                <span class="value">{{ item.note || "--" }}</span>
              </div>
            </div>
          </div>
          <div class="template-actions">
            <div
              class="action-btn-small"
              :class="{ disabled: copyApiLoading }"
              @click="copyTemplateHandle(item)"
            >
              {{ copyApiLoading ? "复制中..." : "复制" }}
            </div>
            <div
              class="action-btn-small"
              :class="{
                disabled: detailApiLoading,
                hidden: item.defaultTemplate,
              }"
              @click="editTemplateHandle(item)"
            >
              {{ detailApiLoading ? "打开中..." : "编辑" }}
            </div>
            <div
              class="action-btn-small warning"
              :class="{
                disabled: deleteApiLoading,
                hidden: item.defaultTemplate,
              }"
              @click="
                item.defaultTemplate || deleteApiLoading
                  ? null
                  : deleteTemplateHandle(item)
              "
            >
              {{ deleteApiLoading ? "删除中..." : "删除" }}
            </div>
          </div>
        </div>
      </div>
    </div>

    <!-- 新建/编辑模板弹框 -->
    <el-dialog
      class="template-dialog self-dialog"
      v-model="dialogVisible"
      :title="
        dialogMode === 'add'
          ? '新建模板'
          : dialogMode === 'edit'
          ? '编辑模板'
          : '查看模板'
      "
      width="80%"
      :before-close="handleClose"
    >
      <el-form
        class="template-form"
        :model="templateForm"
        :disabled="dialogMode === 'view'"
      >
        <el-form-item label="模板名称" required>
          <el-input v-model="templateForm.name" placeholder="输入模板名称" />
        </el-form-item>
        <el-form-item label="模板说明" required>
          <el-input v-model="templateForm.note" placeholder="输入模板说明" />
        </el-form-item>
      </el-form>

      <div class="quota-section">
        <el-table
          :data="quotaList"
          stripe
          class="self-stripe-table"
          :row-class-name="getRowClassName"
        >
          <el-table-column label="序号" width="60" align="center">
            <template #default="{ $index }">{{ $index + 1 }}</template>
          </el-table-column>
          <el-table-column label="一级指标" width="200">
            <template #default="{ row }">
              <el-input
                v-model="row.name"
                placeholder=""
                :disabled="dialogMode === 'view'"
              />
            </template>
          </el-table-column>
          <el-table-column label="二级指标" min-width="300">
            <template #default="{ row }">
              <el-input
                type="textarea"
                v-model="row.evaluationCriteria"
                placeholder="输入二级指标&#10;每行一个指标&#10;"
                :rows="4"
                :disabled="dialogMode === 'view'"
              />
              <el-input
                style="margin-top: 1rem"
                type="textarea"
                v-model="row.evaluationLevel"
                placeholder="输入评价建议"
                :rows="2"
                :disabled="dialogMode === 'view'"
              />
            </template>
          </el-table-column>
          <el-table-column label="权重" width="130">
            <template #default="{ row }">
              <el-input-number
                v-model="row.evaluationScore"
                :min="0"
                :max="100"
                controls-position="right"
                :disabled="dialogMode === 'view'"
              />
            </template>
          </el-table-column>
          <el-table-column
            v-if="dialogMode !== 'view'"
            label="操作"
            width="100"
            align="center"
          >
            <template #default="{ $index }">
              <el-button
                class="del-btn"
                size="small"
                @click="deleteQuotaRow($index)"
              >
                删除
              </el-button>
            </template>
          </el-table-column>
        </el-table>
        <div class="add-quota-btn" @click="addQuotaRow">
          <el-icon class="btn-icon"><Plus /></el-icon>
          <span class="text">添加行</span>
        </div>
      </div>

      <template #footer v-if="dialogMode !== 'view'">
        <div class="dialog-footer">
          <el-button
            :disabled="templateForm.id?.includes('default-template')"
            @click="handleClose"
            >取消</el-button
          >
          <el-button
            :disabled="templateForm.id?.includes('default-template')"
            type="primary"
            @click="handleSave"
            :loading="saveApiLoading"
          >
            保存
          </el-button>
        </div>
      </template>

      <!-- 提示文字 -->
      <div class="tips">
        模板总分需要为
        <span style="font-weight: bold; color: #00a3ff">100</span> 分
        <span v-if="totalScore !== 100" class="score-tip">
          （当前总分：<span
            :class="totalScore > 100 ? 'over-score' : 'under-score'"
            >{{ totalScore }}</span
          >
          分）
        </span>
        <span v-else class="score-tip valid-score">✓ 总分正确</span>
      </div>
    </el-dialog>
  </div>
</template>

<script setup lang="ts">
import { ref, computed } from "vue";
import { Plus } from "@element-plus/icons-vue";
import { ElMessage, ElMessageBox } from "element-plus";
import { ListResponseType, PaginationType } from "@/api/globalType";
import {
  getTemplateListAPI,
  addOrUpdateTemplateAPI,
  deleteTemplateAPI,
  copyTemplateAPI,
  getTemplateDetailAPI,
  GetTemplateDetailResponseType,
  GetTemplateListQueryType,
  AddOrUpdateTemplateQueryType,
  TemplateType,
} from "@/api/service/template";
import { getQuotaListAPI, QuotaType } from "@/api/service/quota";
import { formatTime } from "@/assets/js/utils";

// 模板列表
const templateList = ref<TemplateType[]>([]);
// 默认模板
const defaultTemplateId = ref<string>("");

// 查询条件
const queryObj = ref<GetTemplateListQueryType>({
  name: "",
});
// 分页
const pagination = ref<PaginationType>({
  currentPage: 1,
  numPerPage: 1000,
  totalCount: 0,
  totalPages: 0,
});

// API调用保护状态
const listApiLoading = ref(false);
const copyApiLoading = ref(false);
const deleteApiLoading = ref(false);
const detailApiLoading = ref(false);
const saveApiLoading = ref(false);

// 获取模板列表
function getTemplateList() {
  // 防止并发调用
  if (listApiLoading.value) return;

  listApiLoading.value = true;

  getTemplateListAPI({
    name: queryObj.value.name,
    currentPage: pagination.value.currentPage,
    numPerPage: pagination.value.numPerPage,
  })
    .then((_data: any) => {
      const data = _data as ListResponseType<TemplateType>;
      templateList.value = data.list || [];
      defaultTemplateId.value =
        templateList.value.find((item) => item.id?.includes("default-template"))
          ?.id || "";
      pagination.value.currentPage = data.currentPage || 1;
      pagination.value.numPerPage = data.numPerPage || 10;
      pagination.value.totalCount = data.totalCount || 0;
    })
    .catch(() => {
      ElMessage.error("获取模板列表失败");
    })
    .finally(() => {
      listApiLoading.value = false;
    });
}

getTemplateList();

// 获取指标详情
function getQuotaList(templateId: string): Promise<QuotaType[]> {
  return getQuotaListAPI({ templateId }).then((_data: any) => {
    const data = _data as QuotaType[];
    return data;
  });
}

// 复制模板
function copyTemplateHandle(template: TemplateType) {
  // 防止并发调用
  if (copyApiLoading.value) return;

  ElMessageBox.confirm(`确定要复制模板"${template.name}"吗？`, "确认复制", {
    confirmButtonText: "确定",
    cancelButtonText: "取消",
    type: "info",
  }).then(() => {
    copyApiLoading.value = true;

    copyTemplateAPI({ templateIds: [template.id] })
      .then(() => {
        ElMessage.success("复制成功");
        getTemplateList();
      })
      .catch(() => {
        ElMessage.error("复制失败");
      })
      .finally(() => {
        copyApiLoading.value = false;
      });
  });
}

// 删除模板
function deleteTemplateHandle(template: TemplateType) {
  // 防止并发调用
  if (deleteApiLoading.value) return;

  ElMessageBox.confirm(
    `确定要删除模板"${template.name}"吗？删除后不可恢复。`,
    "确认删除",
    {
      confirmButtonText: "确定",
      cancelButtonText: "取消",
      type: "warning",
    }
  ).then(() => {
    deleteApiLoading.value = true;

    deleteTemplateAPI({ templateIds: [template.id] })
      .then(() => {
        ElMessage.success("删除成功");
        getTemplateList();
      })
      .catch(() => {
        ElMessage.error("删除失败");
      })
      .finally(() => {
        deleteApiLoading.value = false;
      });
  });
}

// 弹框相关
const dialogVisible = ref(false);
const dialogMode = ref<"add" | "edit" | "view">("add");
const templateForm = ref<AddOrUpdateTemplateQueryType>({
  id: null,
  name: "",
  note: "",
});
// 计算总分 - 实时计算所有指标的分值总和
const totalScore = computed(() => {
  return quotaList.value.reduce((sum, quota) => {
    const score = quota.evaluationScore || 0;
    return sum + score;
  }, 0);
});

// 创建新的指标对象
function createNewQuota(): QuotaType {
  return {
    id: null,
    name: "",
    level: 1,
    evaluationCriteria: "",
    evaluationLevel: "",
    evaluationScore: 10,
    note: "",
    templateId: null,
    parentQuotaId: null,
  };
}
// 创建默认的10条指标数据
async function createDefaultQuotaList(): Promise<QuotaType[]> {
  try {
    const quotaList = await getQuotaList(defaultTemplateId.value);
    return quotaList.map((item) => ({
      ...item,
      id: null, // 清空ID，作为新的指标
      templateId: null, // 清空模板ID
    }));
  } catch (error) {
    console.error("获取默认模板指标失败，使用空指标列表", error);
    // 如果获取失败，返回10条空指标
    return Array.from({ length: 10 }, () => createNewQuota());
  }
}
// 指标列表，初始为空数组
const quotaList = ref<QuotaType[]>([]);

// 存储有问题的指标索引，用于UI高亮提示
const problematicQuotaIndexes = ref<Set<number>>(new Set());
// 获取表格行的CSS类名
function getRowClassName({ rowIndex }: { rowIndex: number }) {
  return problematicQuotaIndexes.value.has(rowIndex) ? "error-row" : "";
}

// 处理二级指标输入 - 自动添加实心圆点
function formatEvaluationCriteria(text: string): string {
  if (!text || !text.trim()) return text;

  const lines = text
    .split("\n")
    .map((line) => line.trim())
    .filter((line) => line.length > 0)
    .map((line) => {
      // 如果行已经有实心圆点，就不重复添加
      if (line.startsWith("● ")) {
        return line;
      }
      // 移除可能存在的其他项目符号（如"1、"、"•"、"-"等）
      const cleanLine = line.replace(/^[1-9]+[、.)]\s*|^[•\-*]\s*|^●\s*/, "");
      return cleanLine ? `● ${cleanLine}` : "";
    })
    .filter((line) => line.length > 0);

  return lines.join("\n");
}

// 处理评价标准输入事件
function handleEvaluationCriteriaInput(quota: QuotaType) {
  // 延迟处理，避免影响用户正在输入
  setTimeout(() => {
    if (quota.evaluationCriteria) {
      const formatted = formatEvaluationCriteria(quota.evaluationCriteria);
      if (formatted !== quota.evaluationCriteria) {
        quota.evaluationCriteria = formatted;
      }
    }
  }, 500);
}

// 新建模板
async function addTemplateHandle() {
  dialogMode.value = "add";
  templateForm.value = {
    id: null,
    name: "",
    note: "",
  };
  // 异步加载默认指标数据
  quotaList.value = await createDefaultQuotaList();
  // 清空错误状态
  problematicQuotaIndexes.value.clear();
  dialogVisible.value = true;
}

// 编辑模板
async function editTemplateHandle(template: TemplateType) {
  // 防止并发调用
  if (detailApiLoading.value) return;

  detailApiLoading.value = true;

  getTemplateDetailAPI({ templateId: template.id })
    .then(async (_data: any) => {
      const data = _data as GetTemplateDetailResponseType;
      dialogMode.value = "edit";
      templateForm.value = {
        id: template.id,
        name: template.name,
        note: template.note || "",
      };
      // 如果没有指标数据或数据为空，则显示默认的10条空指标
      const quotaData = data.quotaList || [];

      // 处理二级指标展示样式 - 为每行添加实心圆点标识符
      const processedQuotaData = quotaData.map((item) => {
        // if (item.evaluationCriteria && item.evaluationCriteria.trim()) {
        //   // 分割多行内容，过滤空行，为每行添加实心圆点
        //   const lines = item.evaluationCriteria
        //     .split("\n")
        //     .map((line) => line.trim())
        //     .filter((line) => line.length > 0)
        //     .map((line) => {
        //       // 如果行已经有实心圆点，就不重复添加
        //       if (line.startsWith("● ")) {
        //         return line;
        //       }
        //       // 移除可能存在的其他项目符号（如"1、"、"•"、"-"等）
        //       const cleanLine = line.replace(
        //         /^[1-9]+[、.)]\s*|^[•\-*]\s*|^●\s*/,
        //         ""
        //       );
        //       return `● ${cleanLine}`;
        //     });

        //   return {
        //     ...item,
        //     evaluationCriteria: lines.join("\n"),
        //   };
        // }
        return item;
      });

      quotaList.value =
        processedQuotaData.length > 0
          ? processedQuotaData
          : await createDefaultQuotaList();
      // 清空错误状态
      problematicQuotaIndexes.value.clear();
      dialogVisible.value = true;
    })
    .catch(() => {
      ElMessage.error("获取模板详情失败");
    })
    .finally(() => {
      detailApiLoading.value = false;
    });
}

// 添加指标行
function addQuotaRow() {
  quotaList.value.push(createNewQuota());
}

// 删除指标行
function deleteQuotaRow(index: number) {
  if (quotaList.value.length > 1) {
    quotaList.value.splice(index, 1);
  } else {
    ElMessage.warning("至少保留一条指标记录");
  }
}

// 关闭弹框
function handleClose() {
  dialogVisible.value = false;
  templateForm.value = {
    id: null,
    name: "",
    note: "",
  };
  // 重置为空数组
  quotaList.value = [];
  // 清空错误状态
  problematicQuotaIndexes.value.clear();
}

// 验证模板数据
function validateTemplate() {
  // 清空之前的错误记录
  problematicQuotaIndexes.value.clear();

  const errors: string[] = [];

  // 验证模板名称
  if (!templateForm.value.name?.trim()) {
    errors.push("输入模板名称");
  }
  // 验证模板名说明
  if (!templateForm.value.note?.trim()) {
    errors.push("输入模板说明");
  }

  // 验证是否有有效的指标
  const validQuotaList = quotaList.value.filter((quota) => quota.name?.trim());
  if (validQuotaList.length === 0) {
    errors.push("至少添加一个有效的指标");
  }

  // 验证指标名称和重复问题
  const quotaNames: string[] = [];
  const nameIndexMap = new Map<string, number[]>(); // 记录每个名称对应的索引

  quotaList.value.forEach((quota, index) => {
    // 检查空指标名称但有其他内容的情况
    if (
      !quota.name?.trim() &&
      ((quota.evaluationScore && quota.evaluationScore > 0) ||
        quota.evaluationCriteria?.trim())
    ) {
      problematicQuotaIndexes.value.add(index);
      errors.push(`第${index + 1}行指标名称不能为空`);
    }

    // 收集有效的指标名称
    const trimmedName = quota.name?.trim();
    if (trimmedName) {
      quotaNames.push(trimmedName);
      if (!nameIndexMap.has(trimmedName)) {
        nameIndexMap.set(trimmedName, []);
      }
      const indexes = nameIndexMap.get(trimmedName);
      if (indexes) {
        indexes.push(index);
      }
    }
  });

  // 检查重复的指标名称
  nameIndexMap.forEach((indexes, name) => {
    if (indexes.length > 1) {
      indexes.forEach((index) => problematicQuotaIndexes.value.add(index));
      errors.push(
        `指标名称"${name}"重复出现在第${indexes.map((i) => i + 1).join("、")}行`
      );
    }
  });

  // 验证总分是否为100分
  if (totalScore.value !== 100) {
    // 标记所有有分值的指标
    quotaList.value.forEach((quota, index) => {
      if (quota.evaluationScore && quota.evaluationScore > 0) {
        problematicQuotaIndexes.value.add(index);
      }
    });
    errors.push(`模板总分必须为100分，当前总分为${totalScore.value}分`);
  }

  return {
    isValid: errors.length === 0,
    errors,
    validQuotaList,
  };
}

// 保存模板
function handleSave() {
  // 防止并发提交
  if (saveApiLoading.value) return;

  // 执行验证
  const validation = validateTemplate();

  if (!validation.isValid) {
    // 显示第一个错误信息
    ElMessage.warning(validation.errors[0]);
    return;
  }

  // 在保存前格式化所有二级指标
  // quotaList.value.forEach((quota) => {
  //   if (quota.evaluationCriteria) {
  //     quota.evaluationCriteria = formatEvaluationCriteria(
  //       quota.evaluationCriteria
  //     );
  //   }
  // });

  // 处理指标数据：将评价标准转换为二级指标
  const processedQuotaList: QuotaType[] = [];

  quotaList.value.forEach((quota) => {
    if (!quota.name?.trim()) return;

    // 添加一级指标
    const firstLevelQuota: QuotaType = {
      id: quota.id,
      name: quota.name,
      level: 1,
      evaluationCriteria: quota.evaluationCriteria,
      evaluationLevel: quota.evaluationLevel,
      evaluationScore: quota.evaluationScore,
      note: quota.note,
      templateId: templateForm.value.id,
      parentQuotaId: null,
    };
    processedQuotaList.push(firstLevelQuota);

    // 处理评价标准，创建二级指标
    // if (quota.evaluationCriteria?.trim()) {
    //   const criteriaLines = quota.evaluationCriteria
    //     .split("\n")
    //     .map((line) => line.trim())
    //     .filter((line) => line.length > 0);

    //   criteriaLines.forEach((criteriaLine) => {
    //     const secondLevelQuota: QuotaType = {
    //       id: null,
    //       name: criteriaLine,
    //       level: 2,
    //       evaluationCriteria: null,
    //       evaluationScore: null,
    //       note: null,
    //       templateId: templateForm.value.id,
    //       parentQuotaId: null, // 这里实际项目中应该设置为父级指标的ID
    //     };
    //     processedQuotaList.push(secondLevelQuota);
    //   });
    // }
  });

  const submitData: AddOrUpdateTemplateQueryType = {
    id: templateForm.value.id,
    name: templateForm.value.name,
    note: templateForm.value.note,
    createUserCode: "admin",
    quotaList: processedQuotaList,
  };

  saveApiLoading.value = true;

  addOrUpdateTemplateAPI(submitData)
    .then(() => {
      ElMessage.success(dialogMode.value === "add" ? "新建成功" : "保存成功");
      handleClose();
      getTemplateList();
    })
    .catch(() => {
      ElMessage.error(dialogMode.value === "add" ? "新建失败" : "保存失败");
    })
    .finally(() => {
      saveApiLoading.value = false;
    });
}
</script>

<style scoped lang="scss">
#TemplatePage {
  height: 100%;
  display: flex;
  flex-direction: column;
  padding-bottom: 1rem;
  background-color: #fff;
}

.header-wrapper {
  display: flex;
  flex-direction: column;

  .title-wrapper {
    position: relative;
    display: flex;
    align-items: center;
    padding-left: 2rem;
    height: 7rem;
    color: $color_brand;
    font-size: $font-size-block-title;
  }

  .title-wrapper::before {
    position: absolute;
    left: 0;
    top: 50%;
    display: block;
    content: "";
    width: 3px;
    height: 1.8rem;
    background-color: $color_brand;
    transform: translateY(-50%);
  }
}

.content-wrapper {
  flex: 1;
  padding: 0 2rem;
  overflow: auto;
  .action-wrapper {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 3rem;
    margin-bottom: 1rem;
    background-color: $text-color-placeholder;
    border-radius: 0.5rem;
    border: 1px solid $border-color-brand;
    transition: all 0.3s;

    &:hover {
      box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
    }

    .action-btn {
      display: flex;
      align-items: center;
      padding: 0.5rem 1.5rem;
      background-color: $color_brand;
      color: #fff;
      border-radius: 0.5rem;
      cursor: pointer;
      font-size: $font-size-block-title;
      transition: all 0.3s;

      .btn-icon {
        margin-right: 0.5rem;
      }

      &:hover:not(.disabled) {
        background-color: darken($color_brand, 10%);
      }

      &.disabled {
        opacity: 0.6;
        cursor: not-allowed;
        pointer-events: none;
      }
    }
  }
  .template-list {
    .template-item {
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 2.5rem;
      margin-bottom: 1rem;
      background-color: $text-color-placeholder;
      border-radius: 0.5rem;
      border: 1px solid $border-color-brand;
      transition: all 0.3s;

      &:hover {
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
      }

      &:last-child {
        margin-bottom: 0;
      }
    }

    .template-info {
      flex: 1;
      min-width: 0;
      cursor: pointer;

      .template-main {
        .template-column {
          display: flex;
          flex-direction: column;
          min-width: 0;
        }

        .template-name {
          display: flex;
          flex-direction: row;
          align-items: center;
          .value {
            color: $text-color-primary;
            font-size: $font-size-page-menu;
          }
          .icon {
            margin-right: 1.5rem;
          }
        }
      }
      .template-other {
        margin-top: 1rem;
        display: grid;
        grid-template-columns: 1fr 1fr 1fr;
        gap: 1rem;
        align-items: start;
        padding-left: 3rem;

        .label {
          color: $text-color-secondary;
          font-size: $font-size-base;
          white-space: nowrap;
        }

        .value {
          color: $text-color-secondary;
          font-size: $font-size-base;
          word-wrap: break-word;
          word-break: break-all;
        }
      }
      &:hover {
        .template-name .value {
          color: $color_brand;
        }
      }
    }

    .template-actions {
      display: flex;
      align-items: center;
      flex-shrink: 0;

      .action-btn-small {
        padding: 0.2rem 1rem;
        margin-left: 2rem;
        background-color: #fff;
        color: $color_brand;
        border: 1px solid $color_brand;
        border-radius: 0.3rem;
        cursor: pointer;
        font-size: $font-size-base-btn-text;
        transition: all 0.3s;
        white-space: nowrap;

        &:hover {
          color: darken($color_brand, 10%);
          border: 1px solid darken($color_brand, 10%);
          text-decoration: underline;
        }

        &.warning {
          color: $color_warning;
          border: 1px solid $color_warning;
          &:hover {
            color: darken($color_warning, 10%);
            border: 1px solid darken($color_warning, 10%);
          }
        }
      }
      .action-btn-small.disabled {
        color: $text-color-disabled;
        border: 1px solid $text-color-disabled;
        cursor: not-allowed;
        &:hover {
          color: $text-color-disabled;
          border: 1px solid $text-color-disabled;
          text-decoration: none;
        }
      }
      .action-btn-small.hidden {
        visibility: hidden;
      }
    }
  }
}

// 弹框样式
:deep(.template-dialog) {
  height: 90vh;
  position: relative;

  .el-dialog__footer {
    text-align: center;
  }
  .quota-section {
    margin-top: 2rem;
    height: calc(90vh - 20rem);
    .add-quota-btn {
      margin-top: 1rem;
      height: 3.8rem;
      width: 100%;
      background-color: rgba($color_brand, 0.1);
      display: flex;
      align-items: center;
      justify-content: center;
      cursor: pointer;
      .btn-icon {
        margin-right: 0.5rem;
        color: $color_brand;
        font-size: 1.6rem;
      }
      .text {
        color: $color_brand;
        font-size: $font-size-base;
      }
    }
  }
  .tips {
    position: absolute;
    bottom: 5px;
    right: 2rem;
    text-align: center;
    color: $text-color-secondary;
    font-size: $font-size-tips;

    .score-tip {
      margin-left: 10px;

      &.valid-score {
        color: $color_success;
        font-weight: bold;
      }

      .over-score {
        color: $color_danger;
        font-weight: bold;
      }

      .under-score {
        color: $color_warning;
        font-weight: bold;
      }
    }
  }
}

:deep(.template-form) {
  display: flex;
  align-items: start;
  width: 100%;
  .el-form-item {
    margin-right: 5rem;
    width: 40%;
    margin-bottom: 0;
  }
  .total-score-item {
    width: 20rem;
    margin-right: 0;
  }
  .el-form-item__label {
    padding-right: 1rem;
    white-space: nowrap;
    color: $text-color-primary;
    text-align: left;
    justify-content: flex-start;
    font-size: $font-size-base;
  }
}
:deep(.el-table) {
  height: calc(100% - 5rem);
  .el-table__cell {
    vertical-align: top !important;
    color: $text-color-regular;
  }
  .el-table__inner-wrapper::before {
    background-color: transparent;
  }
  .el-input__inner,
  .el-textarea__inner {
    color: $text-color-regular;
  }
  .el-input-number {
    width: 10rem;
  }
  .del-btn {
    background-color: $color_brand;
    color: #fff;
    font-size: $font-size-base-btn-text;
    border: none;
    &:hover {
      background-color: darken($color_brand, 10%);
    }
  }

  // 错误行样式
  .error-row .el-table__cell {
    background-color: rgba(245, 108, 108, 0.1) !important;
  }
}
</style>
